<template>
  <div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="前端学科" name="web" class="box" style="display:flex">
        <div id="five_web" />
        <div style="flex:1">
          <p>学科试题数量排名</p>
          <div style="height:300px;width:100%;overflow:auto;display: flex;flex-direction: column;">
            <div v-for="(items, index) in weblist" :key="index" style="margin-bottom:0;display:flex;">
              <div style="width: 30%"><i :class="{ color: index < 3 }">{{ index + 1 }}</i></div>
              <span style="width: 30%" class="tet">{{ items }}</span>
              <span style="width: 30%">{{ items }}</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="JAVA学科" name="java" class="box">
        <div id="five_java" />
        <div style="flex:1">
          <p>学科试题数量排名</p>
          <div style="height:300px;width:100%;overflow:auto;display: flex;flex-direction: column;">
            <div v-for="(items, index) in weblist" :key="index" style="margin-bottom:0;display:flex">
              <div style="width: 30%"><i :class="{ color: index < 3 }">{{ index + 1 }}</i></div>
              <span style="width: 30%" class="tet">{{ items }}</span>
              <span style="width: 30%">{{ items }}</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import { GridComponent, LegendComponent } from 'echarts/components'
import { LineChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'
echarts.use([
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition
])
export default {
  props: {
    item: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      activeName: 'web',
      weblist: [],
      javalist: []
    }
  },
  mounted() {
    const chartDomWeb = echarts.init(document.getElementById('five_web'))
    const chartDomJava = echarts.init(document.getElementById('five_java'))
    const web_1 = this.item.filter((item) => item.name === 'web')[0].data_1
    const web_2 = this.item.filter((item) => item.name === 'web')[0].data_2
    const java_1 = this.item.filter((item) => item.name === 'java')[0].data_1
    const java_2 = this.item.filter((item) => item.name === 'java')[0].data_2
    this.weblist = web_1
    this.javalist = java_1
    chartDomWeb.setOption(
      {
        xAxis: {
          type: 'category',
          data: [
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
            '7',
            '8',
            '9',
            '10',
            '11',
            '12',
            '13',
            '14'
          ],
          axisLine: {
            lineStyle: {
              color: '#008acd'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitArea: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: '#008acd'
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(50,50,50,0.5)',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {},
        grid: {
          x: 50,
          y: 30,
          x2: 20,
          y2: 40
        },
        series: [
          {
            name: 'expected',
            data: web_1,
            type: 'line',
            smooth: true,
            color: 'red'
          },
          {
            name: 'actual',
            data: web_2,
            type: 'line',
            smooth: true
          }
        ]
      }
    )
    chartDomJava.setOption(
      {
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7'],
          axisLine: {
            lineStyle: {
              color: '#008acd'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitArea: {
            show: true
          },
          axisLine: {
            lineStyle: {
              color: '#008acd'
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(50,50,50,0.5)',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {},
        grid: {
          x: 50,
          y: 30,
          x2: 20,
          y2: 40
        },
        series: [
          {
            name: 'expected',
            data: java_1,
            type: 'line',
            smooth: true,
            color: 'red'
          },
          {
            name: 'actual',
            data: java_2,
            type: 'line',
            smooth: true
          }
        ]
      }
    )
  }
}
</script>

<style scoped>
#five_web {
  width: 50%;
  height: 300px;
}
#five_java {
  width: 1100px;
  height: 300px;
}
.box {
  display: flex;
  font-size: 16px;
}
p {
  line-height: 1;
}
i {
  display: inline-block;
  color: #000;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  background-color: #f5f5f5;
  border-radius: 50%;
}
.color {
  color: #fff;
  background-color: #314659;
}
.tet {
  margin: 0 260px 0 50px;
}
</style>
